<template>
  <div class="ek-btn-group" :class="mode" v-if="buttons?.length">
    <template  v-for="(item, index) in buttons">
      <el-button
        v-if="!item.hidden || !item.hidden({ ...params })"
        :key="index"
        @click.stop="handleOperate(item)"
        :loading="item.loading ? true : false"
        :size="size"
        :type="item.type"
        plain
       
      >
        <el-icon :class="['ek-btn-group-icon',item.icon]" size="14" v-if="item.icon"/> 
        {{ item.text }}
      </el-button>
     </template>
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  // 显示/隐藏
  buttons: {
    type: Array,
    default: () => [],
  },
  mode: {
    type: String,
    default: "default",
  },
  size: {
    type: String,
    default: "default",
  },
  // 数据多个参数
  params: {
    type: Object,
    default: () => {},
  }
});

const emit = defineEmits(["operate"]);

const handleOperate = (item) => {
  emit("operate", item);
};
</script>

<style scoped lang="scss">
.ek-btn-group {
  display: flex;
  justify-content: center;
  > .el-button {
    margin-left: 12px ;
  }
  &.column {
    > .el-button {
      margin-left: 6px ;
      border: none;
      background: unset;
      padding: 2px;
      color: var( --text-link-color);
      cursor: pointer;
      &:hover {
        color: var( --text-link-hover-color);
      }
    }
    >.el-button--danger {
      color: var( --button-danger-plain-text-color);
      &:hover {
        color:  var( --button-danger-plain-text-color);
      }
    }
  }
  .ek-btn-group-icon {
    margin-right: 4px;
    font-weight: bold;
  }
}
</style>
